<template>
  <div style="background:#FFFFFF">
    <el-row style="padding:10px">
      <el-row>
        <el-input
          style="width:300px;float:left"
          size="small"
          v-model="mSearchKey"
          clearable
          placeholder="输入关键字"
        ></el-input>
        <el-button
          style="float:left;margin-left:10px;"
          icon="el-icon-search"
          circle
          type="primary"
          size="small"
          @click="searchUser()"
        ></el-button>

        <el-button
          type="success"
          plain
          size="small"
          icon="el-icon-refresh-right"
          style="float:right;"
          @click="page=1;mFilter.role='all';mTabTopActive='all';getTableList()"
        ></el-button>
        <el-button
          type="primary"
          plain
          size="small"
          style="float:right;margin-right:10px"
          @click="showAddRowDialog()"
        >
          <span class="Fontb">添加人员</span>
        </el-button>
      </el-row>

      <el-row class="BorderTop" style="margin-top:10px;padding-top:10px">
        <el-row>
          <el-tabs v-model="mTabTopActive" @tab-click="tabTopClick">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="用户" name="user"></el-tab-pane>
            <el-tab-pane label="审核人" name="reviewer"></el-tab-pane>
            <el-tab-pane label="司机" name="driver"></el-tab-pane>
            <el-tab-pane label="待审核人员" name="needReview"></el-tab-pane>
          </el-tabs>
        </el-row>
      </el-row>
    </el-row>

    <el-row style="padding-left:10px">
      <el-table :data="mTableData" v-loading="mTableLoading" border style="width:99%">
        <el-table-column label="编号" prop="userId"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="电话" prop="tel"></el-table-column>
        <el-table-column label="所属部门" prop="partmentNamePre"></el-table-column>
        <el-table-column label="所属科室" prop="partmentName"></el-table-column>
        <el-table-column label="角色" prop="strRole"></el-table-column>
        <el-table-column label="用户状态" prop="strUserStatus" width="240">
          <template slot-scope="scope">
            <span>{{scope.row.strUserStatus}}</span>
            <template v-if="scope.row.userStatus=='registed'">
              <br />
              <span>请确认：</span>
              <el-button @click="tongyi(scope.row)" type="text" plain>
                <span class="Fontb">同意</span>
              </el-button>
              <el-button @click="jujue(scope.row)" type="text" plain>
                <span class="Fontb" style="color:#F56C6C">拒绝</span>
              </el-button>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" v-if="scope.row.strRole!='调度人'">
            <el-button @click="showMdfyDialog(scope.row)" type="text">
              <span class="Fontb">编辑</span>
            </el-button>

            <el-button
              v-if="scope.row.isDel==0"
              @click="mSelectRow=scope.row;mDelDialog=true"
              type="text"
            >
              <span class="Fontb" style="color:#F56C6C">禁用</span>
            </el-button>

            <el-button
              v-if="scope.row.isDel==1"
              @click="mSelectRow=scope.row;mHuifuDialog=true"
              type="text"
            >
              <span class="Fontb" style="color:#409EFF">启用</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 分页 -->

    <el-row style="margin-top:10px;padding-bottom:10px">
      <el-pagination
        style="float:right"
        v-if="totalPage"
        background
        layout="prev, pager, next"
        @current-change="pageIndexChange()"
        :current-page.sync="page"
        :page-count="totalPage"
      ></el-pagination>
    </el-row>

    <!-- 重要对话框 -->

    <!-- 添加一行信息 -->
    <el-dialog title="添加用户" :visible.sync="mAddRowDialog" width="600px">
      <el-form ref="addUserForm" :model="mAddRowForm" :rules="mAddRowFormRules" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input placeholder="请输入姓名" v-model="mAddRowForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input placeholder="请输入电话" v-model="mAddRowForm.tel"></el-input>
        </el-form-item>

        <el-form-item label="部门" prop="partmentId">
          <el-cascader v-model="mAddRowForm.partmentId" :options="mPartments"></el-cascader>
        </el-form-item>

        <el-form-item label="角色">
          <el-radio v-model="mAddRowForm.role" label="user">用户</el-radio>
          <el-radio v-model="mAddRowForm.role" label="reviewer">审核人</el-radio>
          <el-radio v-model="mAddRowForm.role" label="driver">司机</el-radio>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="mAddRowDialog = false">
          <span class="Font1">取 消</span>
        </el-button>
        <el-button v-if="!mMdfyRowDialog" type="primary" @click="addRow()">
          <span class="Font1">添 加</span>
        </el-button>
        <el-button v-if="mMdfyRowDialog" type="primary" @click="mdfyRow()">
          <span class="Font1">确认修改</span>
        </el-button>
      </span>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog title="编辑用户" :visible.sync="mMdfyRowDialog" width="600px">
      <el-form ref="editUserForm" :model="mSelectRow" :rules="mAddRowFormRules" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input placeholder="请输入姓名" v-model="mSelectRow.name"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input placeholder="请输入电话" v-model="mSelectRow.tel"></el-input>
        </el-form-item>

        <el-form-item label="部门" prop="partmentId">
          <el-cascader v-model="mSelectRow.partmentId" :options="mPartments"></el-cascader>
        </el-form-item>

        <el-form-item label="角色">
          <el-radio v-model="mSelectRow.role" label="user">用户</el-radio>
          <el-radio v-model="mSelectRow.role" label="reviewer">审核人</el-radio>
          <el-radio v-model="mSelectRow.role" label="driver">司机</el-radio>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="mMdfyRowDialog = false">
          <span class="Font1">取 消</span>
        </el-button>

        <el-button v-if="mMdfyRowDialog" type="primary" @click="mdfyRow()">
          <span class="Font1">确认修改</span>
        </el-button>
      </span>
    </el-dialog>

    <!-- 删除一行信息 -->
    <el-dialog title="禁用用户" :visible.sync="mDelDialog" width="30%">
      <div>确认禁用 {{mSelectRow.name}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mDelDialog = false">
          <span class="Fontb">取 消</span>
        </el-button>

        <el-button type="danger" @click="delRow()">
          <span class="Fontb">确认</span>
        </el-button>
      </span>
    </el-dialog>

    <el-dialog title="启用用户" :visible.sync="mHuifuDialog" width="30%">
      <div>确认启用 {{mSelectRow.name}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mHuifuDialog = false">
          <span class="Fontb">取 消</span>
        </el-button>

        <el-button type="primary" @click="huifuRow()">
          <span class="Fontb">确认</span>
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>


<style >
@import "../assets/css/base.css";
@import "../assets/css/usermanager.css";
</style>



<script>
import {
  getRequestHeader,
  loginApi,
  getThirdCompanyApi,
  updateUserApi,
  addUserApi,
  getAllReviewersApi,
  getAllUserListApi
} from "../api/user.js";
import {
  getNowFormatDate,
  getWeekToday,
  isBlankApi,
  logxApi
} from "../api/util.js";
import { getAllpartmentsAll } from "../api/partment";
import { Loading } from "element-ui";
export default {
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    var validateTel = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        var b = reg.test(value);
        if (!b) {
          callback(new Error("请输入合法的手机号"));
        } else {
          callback();
        }
      }
    };
    var validateBase = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("该项为必填项"));
      } else {
        callback();
      }
    };
    return {
      mSearchKey: undefined,
      mHuifuDialog: false,
      mDelDialog: false,
      mTableData: [],
      mPartments: [],
      page: 1,
      mUIpage: 0,
      totalPage: 0,
      pagesize: 10,
      mTableLoading: false,
      mCloseDialog: false,
      mMdfyRowDialog: false,
      mAddRowDialog: false,
      mUserInfoTitle: "",
      mUpPartmentId: 0,
      mAddRowForm: {
        name: "",
        tel: "",
        partmentId: "",
        addType: "1",
        role: "user"
      },
      mSelectRow: {
        name: "",
        tel: "",
        partmentId: "",
        addType: "1",
        role: "user"
      },
      mReviewers: [],
      mNextPartmentDialog: false,
      mNextPartment: [],
      mNextRow: undefined,
      mFilter: {
        // isDel: 0,
        role: "all"
      },
      mTabTopActive: "all",

      mAddRowFormRules: {
        name: [
          { required: true, message: "请输入名字", trigger: "blur" },
          { min: 1, max: 20, message: "姓名不可超过20字", trigger: "blur" }
        ],
        tel: [{ required: true, validator: validateTel, trigger: "blur" }],
        partmentId: [
          { required: true, validator: validateBase, trigger: "blur" }
        ]
      }
    };
  },
  created() {},
  mounted() {
    var that = this;
    this.getTableList();
    // 获取部门列表
    getAllpartmentsAll(
      getRequestHeader(),
      new (function() {
        this.fail = function(msg) {};
        this.success = function(data) {
          data.forEach(e1 => {
            e1.label = e1.name;
            e1.value = e1.partmentId;
            if (e1.lstDown) {
              e1.lstDown.forEach(e2 => {
                e2.label = e2.name;
                e2.value = e2.partmentId;
              });
              e1.children = e1.lstDown;
            }
          });
          that.mPartments = data;
        };
      })()
    );
  },
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    fillDataList(list) {
      list.forEach(e => {
        if (e.userStatus == "normal") {
          e.strUserStatus = "正常";
        } else if (e.userStatus == "registed") {
          e.strUserStatus = "审核中";
        } else if (e.userStatus == "registFail") {
          e.strUserStatus = "未通过审核";
        } else if (e.userStatus == "needComfirm") {
          e.strUserStatus = "用户未确认";
        } else {
          e.strUserStatus = "正常";
        }
        if (e.roles.indexOf("reviewer") != -1) {
          e.strRole = "审核人";
        } else if (e.roles.indexOf("driver") != -1) {
          e.strRole = "司机";
        } else if (e.roles.indexOf("controller") != -1) {
          e.strRole = "调度人";
        } else {
          e.strRole = "用户";
        }
      });
      return list;
    },
    getTableList() {
      var that = this;
      // var filter = {
      //   isDel: 0,
      //   role: that.mFilter.role
      // };
      that.mTableLoading = true;
      getAllUserListApi(
        this.mFilter,
        this.page,
        this.pagesize,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.mTableLoading = false;
            that.mTableData = [];
          };
          this.success = function(data) {
            // logxApi(data);
            that.mTableData = that.fillDataList(data.list);
            that.totalPage = data.totalPage;
            that.page = data.currentPage;
            that.mTableLoading = false;
          };
        })()
      );
    },
    pageIndexChange() {
      this.getTableList();
    },
    getPartments() {
      var that = this;
      that.mTableLoading = true;
      getPartmentsApi(
        that.mUpPartmentId,
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            that.mPartments = data;
            that.mTableLoading = false;
          };
          this.fail = function(msg) {
            that.mTableLoading = false;
            that.mPartments = [];
          };
        })()
      );
    },
    mdfyRow() {
      var that = this;
      this.$refs["editUserForm"].validate(valid => {
        if (valid) {
          var row = that.mSelectRow;
          row.partmentId = row.partmentId[1];
          row.roles = [];
          row.roles.push(row.role);
          if (row.role != "user") {
            row.roles.push("user");
          }
          logxApi(row);
          this.showFullLoading();
          updateUserApi(
            row,
            getRequestHeader(),
            new (function() {
              this.fail = function(msg) {
                that.clsoeFullLoading();
                that.$message.error(msg);
              };
              this.success = function(data) {
                that.clsoeFullLoading();
                that.mMdfyRowDialog = false;
                that.getTableList();
              };
            })()
          );
        }
      });
    },
    showAddRowDialog() {
      var that = this;
      // that.mAddRowForm = {};
      // that.mAddRowForm.role = "user";\
      that.mAddRowDialog = true;
      if (this.$refs["addUserForm"]) {
        this.$refs["addUserForm"].resetFields();
      }
    },
    addRow() {
      var that = this;
      // 检查表单
      // logxApi(this.$refs)
      this.$refs["addUserForm"].validate(valid => {
        if (valid) {
          // alert("submit!");

          var row = this.mAddRowForm;
          row.partmentId_1 = row.partmentId[1];
          row.roles = [];
          if (row.role != "user") {
            row.roles.push(row.role);
          }
          row.roles.push("user");

          logxApi(row);
          this.showFullLoading();
          addUserApi(
            row.name,
            row.tel,
            row.roles,
            row.partmentId_1,
            getRequestHeader(),
            new (function() {
              this.fail = function(msg) {
                that.clsoeFullLoading();
                that.$message.error(msg);
              };
              this.success = function(data) {
                that.clsoeFullLoading();
                that.$message.success("添加成功");
                that.mAddRowDialog = false;
                that.getTableList();
              };
            })()
          );
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    showMdfyDialog(row0) {
      var that = this;
      that.mMdfyRowDialog = true;
      if (this.$refs["editUserForm"]) {
        this.$refs["editUserForm"].resetFields();
      }
      var row = JSON.parse(JSON.stringify(row0));
      if (row.roles.indexOf("driver") != -1) {
        row.role = "driver";
      } else if (row.roles.indexOf("reviewer") != -1) {
        row.role = "reviewer";
      } else {
        row.role = "user";
      }
      that.mSelectRow = row;
    },

    delRow() {
      var that = this;
      that.showFullLoading();
      var id = this.mSelectRow.userId;
      var user = {
        userId: id,
        isDel: 1
      };
      updateUserApi(
        user,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mDelDialog = false;
            that.$message.success("已禁用");
            that.getTableList();
          };
        })()
      );
    },
    huifuRow() {
      var that = this;
      that.showFullLoading();
      var id = this.mSelectRow.userId;
      var user = {
        userId: id,
        isDel: 0
      };
      updateUserApi(
        user,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mHuifuDialog = false;
            that.$message.success("已启用");
            that.getTableList();
          };
        })()
      );
    },
    updateUser(userNew) {
      var that = this;
      this.showFullLoading();
      updateUserApi(
        userNew,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.$message.success("更新成功");
            this.page = 1;
            that.getTableList();
          };
        })()
      );
    },
    tongyi(row) {
      var u = {};
      u.userId = row.userId;
      u.userStatus = "normal";
      this.updateUser(u);
    },
    jujue(row) {
      var u = {};
      u.userId = row.userId;
      u.userStatus = "registFail";
      this.updateUser(u);
    },
    tabTopClick(tab, e) {
      this.mFilter.searchKey = this.mSearchKey;
      if (tab.name == "needReview") {
        this.mFilter.role = "all";
        this.mFilter.userStatus = "registed";
      } else {
        this.mFilter.userStatus = undefined;
        this.mFilter.role = tab.name;
      }
      this.getTableList();
    },
    searchUser() {
      this.mFilter.searchKey = this.mSearchKey;
      this.getTableList();
    }

    //----------over mroethods------
  }
};
</script>